<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix title">
    <span>评论</span>
    
  </div>
  <div>
        <el-row :gutter="20" :key="i" class="row" >
            <el-col :span="5"><p class="name">张三：</p></el-col>
            <el-col :span="15"><p>东西不错，赞一个</p></el-col>
            <el-col :span="4" class="zan">
                <img src="../assets/zan_active.png" alt="">
                <span>20</span>
            </el-col>
        </el-row>
        <el-divider :key="i" class="divider"></el-divider>
        <el-row :gutter="20" :key="i" class="row" >
            <el-col :span="5"><p class="name">王五：</p></el-col>
            <el-col :span="15"><p>看着就想买</p></el-col>
            <el-col :span="4" class="zan">
                <img src="../assets/zan_active.png" alt="">
                <span>18</span>
            </el-col>
        </el-row>
        <el-divider :key="i" class="divider"></el-divider>
        <el-row :gutter="20" :key="i" class="row" >
            <el-col :span="5"><p class="name">李四：</p></el-col>
            <el-col :span="15"><p>还行吧。。。</p></el-col>
            <el-col :span="4" class="zan">
                <img src="../assets/zan.png" alt="">
                <span>8</span>
            </el-col>
        </el-row>
        <el-divider :key="i" class="divider"></el-divider>
        <el-row :gutter="20" :key="i" class="row" >
            <el-col :span="5"><p class="name">赵六：</p></el-col>
            <el-col :span="15"><p>垃圾。。。</p></el-col>
            <el-col :span="4" class="zan">
                <img src="../assets/zan.png" alt="">
                <span>4</span>
            </el-col>
        </el-row>
        <el-divider :key="i" class="divider"></el-divider>
        <el-row :gutter="20" :key="i" class="row" >
            <el-col :span="5"><p class="name">郑七：</p></el-col>
            <el-col :span="15"><p>不好</p></el-col>
            <el-col :span="4" class="zan">
                <img src="../assets/zan.png" alt="">
                <span>0</span>
            </el-col>
        </el-row>
        <el-divider :key="i" class="divider"></el-divider>
   
  </div>
</el-card>
</template>

<script>
export default {

}
</script>

<style>
.title{
    text-align: center;
    font-size:2em;
}
    p.name{
        text-align: right;
    }
    .zan{
        display: flex;
        align-items: center;
        font-size: .7em;
    }
    .zan img{
        width:18px;
        height:18px;
        margin-right:5px;
    }
    .row{
        display: flex;
        align-items: center;
    }
    .divider{
        margin:0;
    }
</style>